<template><!--得失分记录-->
	<div id="test">
    <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
    <!--//type 1.攻击得分、2.防守失分、3.异常失分、4.异常得分、5.防守得分-->
    <div v-if="sceneType == 0">
	    <div class="record-statis" v-if="type == 1"> 
	      <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
	              <span v-if="hlConfig!=2">红方</span>攻击得分总次数 <Tag color="purple">{{scoreTotalStatics.totalNum}}</Tag>
		          <span v-if="hlConfig!=2">红方</span>攻击总得分 <Tag color="purple">{{scoreTotalStatics.totalScore}}</Tag>
		    <Button type="primary" @click="getAwdDrillScoreDetailTip" style="margin-left:20px">攻击详情</Button>
	    </div>
	    <div class="record-statis" v-if="type == 2">
	      <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
		          <span v-if="hlConfig!=2">蓝方</span>防守失分总次数 <Tag color="purple">{{scoreTotalStatics.totalNum}}</Tag>
		          <span v-if="hlConfig!=2">蓝方</span>防守总失分 <Tag color="purple">{{scoreTotalStatics.totalScore}}</Tag>
		    <Button type="primary"  @click="getAwdDrillScoreDetailTip" style="margin-left:20px">防守详情</Button>
	    </div>
	    <div class="record-statis" v-if="type == 3">
	      <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
		          <span v-if="hlConfig!=2">蓝方</span>异常得失总次数 <Tag color="purple">{{scoreTotalStatics.totalNum}}</Tag>
		          <span v-if="hlConfig!=2">蓝方</span>异常总失分 <Tag color="purple">{{scoreTotalStatics.totalScore}}</Tag>
		    <Button type="primary"  @click="getAwdDrillScoreDetailTip" style="margin-left:20px">异常失分详情</Button>
	    </div>
		<div class="record-statis" v-if="type == 4">
	      <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
		          <span v-if="hlConfig!=2">红方</span>异常得分总次数 <Tag color="purple">{{scoreTotalStatics.totalNum}}</Tag>
		          <span v-if="hlConfig!=2">红方</span>异常总得分 <Tag color="purple">{{scoreTotalStatics.totalScore}}</Tag>
		    <Button type="primary"  @click="getAwdDrillScoreDetailTip" style="margin-left:20px">异常得分详情</Button>
	    </div>
		<div class="record-statis" v-if="type == 5">
	      <!--<title-top :fnlist="initObj.Fnlist"></title-top>-->
		          <span v-if="hlConfig!=2">蓝方</span>防守得分总次数 <Tag color="purple">{{scoreTotalStatics.totalNum}}</Tag>
		          <span v-if="hlConfig!=2">蓝方</span>防守总得分 <Tag color="purple">{{scoreTotalStatics.totalScore}}</Tag>
		    <Button type="primary"  @click="getAwdDrillScoreDetailTip" style="margin-left:20px">防守得分详情</Button>
	    </div>
    </div>
    <table-body :options="initObj"></table-body>
    <Modal v-model="scoreDetailModal.show"
               :title="scoreDetailModal.title"
               width="1000"
               :mask-closable = "false"
               footer-hide
        >
        <Row class="targetHeader">
			<Select filterable v-model="queryScoreDetailInfo.targetName"
					class="clearableSelect"
					@on-change="changeScoreDetailPage(1)" clearable
					placeholder="请选择目标">
				<Option v-for="item in questionList" :value="item.name" :key="item.id" :title="item.name">{{ item.name }}</Option>
			</Select>
            <Page :total="scoreDetailInfoTotal"
                  :page-size="queryScoreDetailInfo.pageSize"
                  show-total show-elevator
				  :current="queryScoreDetailInfo.pageIndex"
                  @on-change="changeScoreDetailPage" style="float: right" v-if="scoreDetailInfoTotal > 0">
            </Page>
        </Row>
        <Table :columns="scoreDetailInfoColumn" :data="scoreDetailInfoList" class="carddeep"></Table>
    </Modal>
  </div>
</template>
<script>
//	import Cookies from 'js-cookie'
import {teamScoreStatis,awdDrillScoreDetail} from '@/api/compitionStatic'
import tableBody from './tableListComponent'
import groupMixin from "@/mixin/groupMixin"
import questionMixin from "@/mixin/questionMixin"
import {getTopoTargetList,getTopoTargetList_old} from '@/api/drill_compete'
export default {
    name: 'scenes',
    props:['sceneType','type','poll','hlConfig','hwType'],//type 1.攻击得分、2.防守失分、3.异常失分、4.异常得分、5.防守得分、6.护网裁判评分得分
	mixins: [groupMixin, questionMixin],
	data(){
    const n = function(val){
      this.selNumber = val;
      if(isNaN(Number(this.selNumber))){
	     this.$Message.error('周期请输入数字');
	     return
	  }
      this.getAbnormalScore();
    }.bind(this);
    const setNumber = function(val){
    	this.selNumber = val.currentTarget.value;
    	if(isNaN(Number(this.selNumber))){
	      	this.$Message.error('周期请输入数字');
	    }
    }.bind(this);
    let teamText,scoreDetailTimeText,scoreText,numberText;
	if(this.type == 4 || this.type == 1 || this.type == 5 || this.type == 6){//1.攻击得分、2.防守失分、3.异常失分、4.异常得分、5.防守得分
		numberText = '得分周期'
		scoreText = '得分'
	}else{
		numberText = '失分周期',
		scoreText = '失分'
	}
	if(this.type == 1){
		teamText = '攻击团队'
		scoreDetailTimeText = '被攻击次数'
	}else if(this.type == 2){
		teamText = '防守团队'
	}else{
		teamText = '团队'
		if(this.type == 4){
			scoreDetailTimeText = '异常次数'
		}else if(this.type == 5){
			scoreDetailTimeText = '防守成功次数'
		}
	}
	  	return {
			topoTargetData: [],
	  	  initObj:{
            Button:[
            ],
            Input:[
              {
                placeholder:'请输入周期数',
                setName:setNumber,
                fnName:n,
              }
            ],
            Select:[
				{
					optionsValue: [],
					placeholder: `请选择${teamText}`,
					fnName: this.getAbnormalScoreById
				},
				{
					optionsValue: [],
					placeholder: `请选择目标`,
					fnName: this.getAbnormalScoreByGameBox
				}
            ],
            DatePicker:{
              isShow:false,
//            fnName:d,
            },
            Page:{
              total:0,
              currentPage:1,
              pageSize:10
            },
            Table:{
              listCol:[
//              {
//                type: 'index',
//                align: 'center',
//                ellipsis:true,
//                width:60
//              },
//              {
//                title:'团队',
//                key:'teamname',
//                align:'center',
//                ellipsis:true,
//                tooltip:true,
//              },
//              {
//                title:'gameBox名称',
//                key:'targetvmname',
//                align:'center',
//                ellipsis:true,
//                tooltip:true,
//              },
//              {
//                title:'分数变化',
//                key:'score',
//                align:'center',
//              },
//              {
//                title:'时间',
//                key:'createtime',
//                align:'center',
//                ellipsis:true,
//                tooltip:true,
//              }
//				{
//                type: 'index',
//                align: 'center',
//                ellipsis:true,
//                width:60
//              },
                {
                  title:teamText,
                  key:'teamName',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                  placement:'top-left',
                  order:1,
					width: 240
                },
                {
                  title:'目标名称',
                  key:'targetName',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                  width:200,
//                render:(h,params)=>{
//                  return h('span', params.row.targetName||'无')
//                }
                },
                {
                  title:numberText,
                  key:'number',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                  width:100,
                  render:(h,params) => {
                  	return h('span',params.row.number ? `第${params.row.number}周期` : '无')
                  }
                },
				{
                  title:'周期开始时间',
                  key:'startTime',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
				  width:200,
                  render:(h,params)=>{
                    return h('span', params.row.startTime||'无')
                  }
                },
                {
                  title:'周期结束时间',
                  key:'nextStartTime',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                  render:(h,params)=>{
                    return h('span', params.row.nextStartTime||'无')
                  }
                },
                {
                  title:scoreText,
                  key:'score',
                  align:'center',
                  tooltip:true,
                  width:80,
                },
              ],
              listData:[]
            },
            Fnlist:'getAbnormalScore',
        },
        selName:'',
        gameboxName:'',
        timeout:{},
        selNumber:'',
        sourceName:'',
        //得分统计
        scoreTotalStatics:{},
        //得分详情
        queryScoreDetailInfo:{
        	pageSize:10,
        	pageIndex:1,
        	targetName:''
        },
        scoreDetailInfoTotal:0,
        scoreDetailInfoList:[],
        scoreDetailInfoColumn:[
        	{
        		title:'目标名称',
        		key:'targetName',
        		placement:'top-left',
        		minWidth:150,
        		tooltip:true,
        	},
        	{
        		title:scoreDetailTimeText,
        		key:'oneCount',
        		placement:'top-left',
        		minWidth:60,
        		tooltip:true,
        	},
        	{
        		title:'分数',
        		key:'oneScore',
						minWidth:60,
        		tooltip:true,
        		placement:'top-left'
        	}
        ],
        scoreDetailModal:{
        	show:false,
        	loading:true,
        	title:'攻击详情'
        }
      }
	},
    components:{
//    'title-top':titleTop,
      'table-body':tableBody
    },
    watch:{
		teamList(newValue) {
			this.initObj.Select[0].optionsValue = newValue
			if(this.type == 1) { // 只有为1时，才有两个团队选择框
				this.initObj.Select[1].optionsValue = newValue
			}
		},
		questionList(newValue) {
			if (![6].includes(this.type)) {
				this.initObj.Select[this.initObj.Select.length - 1].optionsValue = newValue
			}
		},
		topoTargetData(newValue) {
			if ([6].includes(this.type)) {
				newValue.forEach(item => {
					if(this.hwType === 0){
						item.name = item.company
					}
				})
				this.initObj.Select.find(item => item.placeholder === '请选择目标').optionsValue = newValue
			}
		}
    },
    beforeDestroy(){
		clearTimeout(this.timeout)
	},
    created(){
      //this.getAbnormalScore();
		if (this.type === 6) {
			this.getTopoTargetList()
		}
    },
	mounted(){
		if(this.type==1){
			console.log();
			// this.initObj.Table.listCol.push({ // 21673
	    //         title:'攻击时间',
	    //         key:'subTime',
	    //         align:'center',
	    //         width:200,
	    //     });
		}
		if(this.sceneType==0&&this.type==2&&this.hlConfig==2){
			 this.initObj.Table.listCol.splice(6, 0, {
	            title:'得分团队',
	            key:'sourceName',
	            align:'center',
	            ellipsis:true,
	            tooltip:true,
	            width:100,
	        });
		}
		clearTimeout(this.timeout)
	    this.getAbnormalScore();
	    if(this.sceneType == 1 && (this.type == 2  || this.type == 3)){//1.攻击得分、2.防守失分、3.异常失分、4.异常得分、5.防守得分
			 this.initObj.Table.listCol.splice(3, 0, {
	            title:'得分团队',
	            key:'sourceName',
	            align:'center',
	            ellipsis:true,
	            tooltip:true,
	            width:100,
	        });
		}else if(this.sceneType == 1 && this.type == 4){
			this.initObj.Table.listCol.splice(3, 0, {
	            title:'失分团队',
	            key:'sourceName',
	            align:'center',
	            ellipsis:true,
	            tooltip:true,
	            width:100,
	        });
		}else if(this.sceneType == 5){
	    	this.initObj.Input.pop()
			this.initObj.Table.listCol = [
				{
                  title:'团队',
                  key:'teamName',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                  width:240,
                  placement:'top-left'
                },
                {
                  title:'目标名称',
                  key:'targetName',
                  align:'center',
                  ellipsis:true,
                  tooltip:true,
                  width:100
                },
				{
                  title:'得分',
                  key:'score',
                  align:'center',
                  tooltip:true,
                  width:60
				}
			]
			// this.initObj.Select.push({
			// 	placeholder:'请选择统计类型',
	    //     	fnName: this.getAbnormalScoreByTeamRole,
			// 	optionsValue: [
			// 		{
			// 			id:'1',
			// 			name:'攻击方'
			// 		},
			// 		{
			// 			id:'2',
			// 			name:'防守方'
			// 		}
			// 	]
			// })
		}
		if(this.type == 1){
			this.initObj.Table.listCol.splice(2, 0, {
		        title:'被攻击团队',
		        key:'sourceName',
		        align:'center',
		        ellipsis:true,
		        tooltip:true,
		        width:100,
	    	});
    		this.initObj.Select.splice(1,0,{
	    		placeholder:'请选择被攻击团队',
	        	fnName: this.getAbnormalScoreByAttackedId,
				optionsValue: []
	    	})
	  	}
	},
  methods:{
	  getTopoTargetList(){
		let getApi = this.hwType === 0 ? getTopoTargetList_old : getTopoTargetList;
		getApi({
			  pageIndex:1,
			  pageSize:2147483647,
			  projectId:this.$route.query.prjid
		  }).then(data => {
			  if(data.code==1){
				  this.topoTargetData = data.data.items || data.data;
			  }else{
				  this.topoTargetData = []
				  this.$Message.warning(data.message);
			  }
		  })
	  },
  	getAwdDrillScoreDetailTip(){
  		this.queryScoreDetailInfo.pageIndex = 1;
  		this.queryScoreDetailInfo.targetName = '';
  		this.getAwdDrillScoreDetail()
  	},
  	getAwdDrillScoreDetail(){
  		if(this.type == 1){
  			this.scoreDetailModal.title = '攻击详情'
  		}else if(this.type == 4){
  			this.scoreDetailModal.title = '异常得分详情'
  		}else if(this.type == 2){
  			this.scoreDetailModal.title = '防守失分详情'
  		}else if(this.type == 3){
  			this.scoreDetailModal.title = '异常失分详情'
  		}else if(this.type == 5){
  			this.scoreDetailModal.title = '防守得分详情'
  		}
  		awdDrillScoreDetail(this.$route.query.id,this.type,this.queryScoreDetailInfo).then(data => {
  			this.scoreDetailModal.show = true;
  			if(data.code == 1){
  				this.scoreDetailInfoTotal = data.data.total;
  				this.scoreDetailInfoList = data.data.items;
  			}else{
  				this.scoreDetailInfoTotal = 0;
  				this.scoreDetailInfoList = [];
  				this.$Message.error(data.message);
  			}
  		}).catch(error => {
  		})
  	},
  	changeScoreDetailPage(page){
  		this.queryScoreDetailInfo.pageIndex = page;
  		this.getAwdDrillScoreDetail();
  	},
	getAbnormalScoreById(id) {
		this.selName = this.getTeamNameById(id)
		this.getAbnormalScore()
	},
	getAbnormalScoreByAttackedId(id) {
		this.sourceName = this.getTeamNameById(id)
		this.getAbnormalScore()
	},
	getAbnormalScoreByTeamRole(val) {
		if (val) {
			this.teamRole = Number(val)
		} else {
			this.teamRole = val
		}
		this.getAbnormalScore()
	},
	getAbnormalScoreByGameBox(id) {
	  	if ([6].includes(this.type)) {
			this.gameboxName = (this.topoTargetData.find(item => item.id === id) || {}).name
		} else {
			this.gameboxName = this.getQuestionNameById(id)
		}
	  	this.getAbnormalScore();
    },
    getAbnormalScore(page,pageSize,querytime){
      let _this = this;
      let pages = page || 1;
	  this.$set(this.initObj.Page, 'currentPage', pages)
      let rows = pageSize||_this.PZ|| 10;
      let id = '';
      let params={
        pageIndex : pages,
        pageSize : rows,
        sceneId:_this.$route.query.id,
        scoreType:this.type
      };
      if(this.selName){
        params.teamName =  this.selName;
      }
      if(this.selNumber && !isNaN(Number(this.selNumber))){
      	params.number = Number(this.selNumber);
      }else if(this.selNumber && isNaN(Number(this.selNumber))){
      	//this.$Message.error('周期请输入数字');
      }
      if(this.gameboxName){
        params.targetName = this.gameboxName;
      }
      if(this.sourceName){
      	params.sourceName = this.sourceName;
      }
	  if (this.teamRole && this.sceneType === 5) { // 护网演练需要额外传递护网团队类型区分
		  params.teamRole = this.teamRole
	  }
//    if(querytime){
//      params.createtime = querytime[0];
//      params.lastupdatetime = querytime[1];
//    }
      clearTimeout(this.timeout)
      teamScoreStatis(params).then(data=>{
        if(data.code==1){
        	if (this.selName || this.selNumber || this.gameboxName || this.sourceName) { // 有搜索条件时，不设置得分总次数、总得分
				_this.scoreTotalStatics = Object.assign(_this.scoreTotalStatics, data.data)
			} else {
				_this.scoreTotalStatics = Object.assign(data.data, { totalNum: data.data.total })
			}
          _this.initObj.Table.listData = data.data.items;
          _this.initObj.Page.total = data.data.total;
          if(this.poll){ //如果需要轮询
		    	this.timeout = setTimeout(() => {
		    		this.getAbnormalScore(page,pageSize);
		    	},3000)
		    }
        }
      })
    },
    saveInfo(val){
    }
    },
}
</script>
<style>
	
  .drillsTable .ivu-poptip-body {
    text-align: left!important;
  }
  .scenesHeader{
    margin-bottom: 16px;
  }
  .drillTables{
    min-height: 300px;
  }
  .drillsTable.ivu-table-wrapper{
    overflow: inherit;
  }
</style>
<style scoped>
.carddeep /deep/ .defGraphWrap{
		 height: 100%;
	}
  .Titles{
    background: #eeeeee;
    margin: 16px auto;
    padding: 10px 0;
  }
  .targetHeader{
    /*padding: 10px;*/
    margin-bottom: 10px;
  }
  .clearableSelect {
	  width: 150px;
	  margin-right:15px;
  }
  .clearableSelect>>>.ivu-select-selection {
	  border-radius:15px;
	  border: 1px solid #cccccc!important;
	  outline: 0;
  }
  .clearableSelect>>>.ivu-select-selection:hover {
	  border: 1px solid rgb(56 , 56, 211)!important;
	  box-shadow: 0px 0px 8px rgb(56 , 56, 211);
  }
  .clearableSelect>>>.ivu-select-selection:hover i {
	  color: rgb(56 , 56, 211);
  }
  .record-statis{
	background: var(--table-tr-hover-color);
	padding:10px;
	margin-top:10px;
	color:var(--default-color)
   }
</style>
